<template>
	<view>
		<view class="header">
			<view class="searchBox">
				<image src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E9%9D%9E%E7%BF%94%E6%B4%BB%E5%8A%A8/u1817.png"></image>
				<input placeholder="搜索课程/头条/活动"/>
			</view>
			<view class="searchBtn">
				<text>取消</text>
			</view>
		</view>
		<!-- 有结果现实的内容 -->
		<view class="haveResult">
			<uni-section>
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<view v-if="current === 0" >
						<!-- <text class="content-text">选项卡1的内容</text> -->
						  <view class="text1">
							  <view class="informationL">
							    <image
							      src="https://cimg.axureshop.com/54/a3/eb/54a3eb5671b341c7812aa0667a94e529/images/%E8%AF%BE%E7%A8%8B%E7%AE%A1%E7%90%86/u999.png"
							    ></image>
							  </view>
							  <view class="informationR">
							    <text class="name">幼儿英语入门课程</text>
							    <view class="rButton">
							      <view class="rbL">
							        <text class="iconfont icon-qian"></text>
							        <text>2999.00</text>
							      </view>
							      <view class="rbR">323人正在学</view>
							    </view>
							  </view>
						  </view>
					</view>
					<view v-if="current === 1" >
						<!-- <text class="content-text">选项卡2的内容</text> -->
						<view class="text2 " >
							<view class="title">
								<text>30所京城中小学这样过“世界读书日”</text>
							</view>
							<view class="smallTitle">
								<text>正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊重和感谢为人类正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊</text>
							</view>
							<image src="https://cimg.axureshop.com/47/f6/19/47f6193bc5004b1388c6fa23d2a9bd4e/images/%E6%B4%BB%E5%8A%A8%E8%AF%A6%E6%83%85-%E6%8A%A5%E5%90%8D%E4%B8%AD/u1858.png"></image>
							<view class="bottom">
								<view class="bottomL">
									<text>1320赞</text>
									<text>986收藏</text>
								</view>
								<view class="bottomR">2018-01-15</view>
							</view>
						</view>
						<!-- <EducationModule ></EducationModule> -->
					</view>
					<view v-if="current === 2"><text class="content-text">选项卡3的内容</text></view>
				</view>
			</uni-section>
		</view>
	</view>
	<BottomText></BottomText>
</template>

<script lang="ts">
	
	export default {
		data() {
			return {
				items: ['热门课程', '教育头条', '非翔活动'],
				styles: [{
						value: 'text',
						text: '文字'
					}],
				current: 0,
				activeColor: '#333333',
				styleType: 'text',
				headData:[{
					id:1,
					title:'30所京城中小学这样过“世界读书日”',
					content:'正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊重和感谢为人类正值4月23日世界读书日，图书日设立目的是推动更多的人去阅读和写作，希望所有人都能尊',
					zan:'1320',
					collection:'986',
					date:'2018-01-15'
				}]
			}
		},
		methods: {
			onClickItem(e) {
							if (this.current !== e.currentIndex) {
								this.current = e.currentIndex
							}
						},
		}
	}
</script>

<style lang="less" scoped>
	@import url('../../static/iconfont-J/iconfont.css');
.header{
		display: flex;
		justify-content: center;
		height: 80rpx;
		margin: 42rpx 0;
		line-height: 80rpx;
		.searchBox{
			display: flex;
			align-items: center;
			width: 572rpx;
			height: 80rpx;
			background-color: #f2f2f2;
			border-radius: 40px;
			image{
				width: 36rpx;
				height: 36rpx;
				margin-left: 34rpx;
				margin-right: 36rpx;
			}
			input{
				color: #9a9a9a;
			}
		}
		.searchBtn{
			color: #252525;
			font-size: 26rpx;
			margin-left: 38rpx;
		}
	}
	// 搜索到结果
	.example-body {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			padding: 0;
	}
	
	.uni-common-mt {
	font-weight: 700;
	}
	
	.uni-padding-wrap {
		// width: 750rpx;
		padding: 0px 30px;
	}
	// .segmented-control__text.data-v-064e9cd1{
	// 	font-size: 30rpx;
		
	// }
	
	.content {
		display: flex;
		justify-content: center;
		align-items: center;
		
		.text1 {
		  margin: 58rpx 40rpx;
		  height: 156rpx;
		  display: flex;
		  .informationL {
		    width: 288rpx;
		    height: 156rpx;
		    border-radius: 5px;
		    display: flex;
		    justify-content: space-between;
		    image {
		      width: 290rpx;
		      height: 158rpx;
		    }
		  }
		  .informationR {
		    margin-left: 30rpx;
		    margin-top: 34rpx;
			.name{
				font-size: 30rpx;
			}
		    .rButton {
		      width: 354rpx;
		      display: flex;
		      justify-content: space-between;
		      margin-top: 24rpx;
		      .rbL {
		        font-size: 20rpx;
		        line-height: 28rpx;
		        color: #efb235;
		        .iconfont {
		          width: 28rpx;
		          height: 28rpx;
		          color: #efb235;
		          vertical-align: middle;
		          margin-right: 14rpx;
		        }
		      }
		      .rbR {
		        font-size: 22rpx;
		        line-height: 28rpx;
		        color: #919291;
		      }
		    }
		  }
		}
		.text2{
			padding: 26rpx 20rpx;
			margin: 60rpx 38rpx;
			width: 636rpx;
			height: 526rpx;
			// position: absolute;
			// left: 0;
			// top: 120px;
			box-shadow: 0 0 10rpx #F2F2F2;
			.title{
				font-size: 30rpx;
				font-weight: 700;
				margin-bottom: 32rpx;
			}
			.smallTitle{
				// width: 588rpx;
				// height: 78rpx;
				font-size: 22rpx;
				color: #c6c5c5;
				margin-bottom: 26rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				/* 文本不换行 */
				white-space: nowrap;
			}
			image{
				    width: 630rpx;
				    height: 316rpx;
					margin-bottom: 14rpx;
			}
			.bottom{
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				line-height: 24rpx;
				width: 644rpx;
				height: 24rpx;
				color: #cccbcb;
				margin-bottom: 42rpx;
			}
		}
		
	}
	
	.content-text {
			

		}
	
</style>
